import React from 'react'
import {
	Form,
	FormCell,
	CellHeader,
	CellBody,
	Label,
	Input,
	PanelBody,
	Button,
	Select,
	CellFooter,
	Toptips
} from 'react-weui'
import Title from '../../ReuseTitle'
import {
	browserHistory
} from 'react-router';
import $ from 'jquery';
import {
	connectUser
} from '../../../container/user/connectUser'
class UserSignUp extends React.Component {
		constructor(props) {
			super(props)
			this.state = {
				phoneNum: null,
				password: null,
				password2: null,
				message: null,
				Email: null,
				userName: null,
				count: 60,
				liked: true,
				checkNum: null,
				showWarn: false,
				warn: null,
				register: false,
				send:false,
                disabled:false,
			}
		}
		phoneNum(e) {
			this.setState({
				phoneNum: e.target.value,
			})
		}
		checkNum(e) {
			this.setState({
				checkNum: e.target.value,
			})
		}
		userName(e) {
			this.setState({
				userName: e.target.value,
			})
		}
		password(e) {
			this.setState({
				password: e.target.value,
			})
		}
		checkPassword(e) {
			this.setState({
				password2: e.target.value,
			})
		}
		Email(e) {
			this.setState({
				Email: e.target.value,
			})
		}
		sendMessage() {
			let phoneNum = this.state.phoneNum;
			this.props.messageActions.sendMessage(phoneNum);
			this.setState({
				send:true,
			})
        if(this.state.liked){
          this.timer = setInterval(function () {
            var count = this.state.count;
            this.state.liked = false;
            this.setState({
            	disabled:true,
            })
            count -= 1;
            if (count < 1) {
              this.setState({
                liked:true,
                disabled:false,
              });
              count = 60;
              this.timer && clearTimeout(this.timer);

            }
            this.setState({
              count: count
            });
          }.bind(this), 1000);
        }
		}
		componentWillUnmount() {
			this.state.warnTimer && clearTimeout(this.state.warnTimer);
			this.state.successTimer && clearTimeout(this.state.successTimer);
			this.state.infoTimer && clearTimeout(this.state.infoTimer);
			this.timer && clearTimeout(this.timer);
		}
		register() {
			let phoneNum = this.state.phoneNum;
			let password = this.state.password;
			let password2 = this.state.password2;
			let Email = this.state.Email;
			let userName = this.state.userName;
			let checkNum = this.state.checkNum;
			if (password != password2) {
				this.setState({
					showWarn: true,
					warn: "密码不一致"
				});
				this.state.warnTimer = setTimeout(() => {
					this.setState({
						showWarn: false
					});
				}, 2000);

			}
			if (phoneNum == null || password == null || password2 == null || Email == null || userName == null || checkNum == null) {
				this.setState({
					showWarn: true,
					warn: "请填写完整"
				});
				this.state.warnTimer = setTimeout(() => {
					this.setState({
						showWarn: false
					});
				}, 2000);
			}
			else{
				this.props.registerActions.regUser(phoneNum, password, userName, Email, checkNum);
				this.setState({
					register: true
				})
			}
		}

			componentWillReceiveProps(nextProps) {
				if (nextProps.register.isRegistered == true && this.state.register == true) {
				    let phoneNum = this.state.phoneNum;
			        let password = this.state.password;
				    this.props.loginActions.loginUser(phoneNum, password);
					browserHistory.go(-1);
					this.setState({
						register: false,
					})
				}
				if (nextProps.register.isRegistered == false && this.state.register == true) {

					this.setState({
						warn: nextProps.register.statusText,
						showWarn: true,
						register: false,
					})
					this.state.warnTimer = setTimeout(() => {
						this.setState({
							showWarn: false,
							warn:null,
						});
					}, 2000);
				}
				if(nextProps.message.isSended==true&&this.state.send==true) {
				    this.setState({
				    	send:false,
				    	liked:true,
				    	warn:"发送成功",
				    	showSuccess:true,
				    })
					this.state.warnTimer = setTimeout(() => {
						this.setState({
							showSuccess: false,
							warn:null,
						});
					}, 2000);
				}
				if(nextProps.message.isSended==false&&this.state.send==true) {
				   let phoneNum = this.state.phoneNum;
				   this.props.messageActions.sendMessage(phoneNum);
				   this.setState({
				   	send:false,
				   	})
				}
			}
		
	render() {
		 var text = this.state.liked ? '发送' : this.state.count + 'S';
		 
		return (
			<div>
	            <Title title="使用手机号注册" />
	            <PanelBody style={{ marginTop: '65px' }}>
			        <Form>
			            <FormCell select selectPos="before">
	                        <CellHeader>
	                            <Select>
	                                <option value="1">+86</option>
	                                <option value="2">+80</option>
	                                <option value="3">+84</option>
	                                <option value="4">+87</option>
	                            </Select>
	                        </CellHeader>
	                        <CellBody>
	                            <Input type="tel" placeholder="请输入您的手机号" onChange={ e=> this.phoneNum(e)}/>
	                        </CellBody>
	                    </FormCell>
	                    <FormCell vcode>
		                    <CellHeader>
		                        <Label>验证码</Label>
		                    </CellHeader>
		                    <CellBody>
		                        <Input type="number" placeholder="输入验证码" onChange={e =>this.checkNum(e)}/>
		                    </CellBody>
		                    <CellFooter>
		                        <Button type="default" disabled={this.state.disabled} onClick={() => this.sendMessage()}>{text}</Button>
		                    </CellFooter>
	                    </FormCell>
			            <FormCell>
			                <CellHeader>
			                    <Label>设置密码</Label>
			                </CellHeader>
			                <CellBody>
			                     <Input type="password" placeholder="请输入登陆密码" onChange={ e=> this.password(e)}/>
			                </CellBody>
			            </FormCell>
			            <FormCell>
			                    <CellHeader>
			                         <Label>确认密码</Label>
			                     </CellHeader>
			                <CellBody>
			                    <Input type="password" placeholder="请再次输入登陆密码" onChange={e=> this.checkPassword(e)}/>
			                </CellBody>
			            </FormCell>
			            <FormCell>
			                    <CellHeader>
			                         <Label>输入邮箱</Label>
			                     </CellHeader>
			                <CellBody>
			                    <Input type="mail" placeholder="请输入邮箱" onChange={e=> this.Email(e)}/>
			                </CellBody>
			            </FormCell>
			             <FormCell>
			                    <CellHeader>
			                         <Label>输入用户名</Label>
			                     </CellHeader>
			                <CellBody>
			                    <Input type="vcode" placeholder="请输入用户名" onChange={e=> this.userName(e)}/>
			                </CellBody>
			            </FormCell>
			        </Form>
		        </PanelBody>
		        <Toptips type="primary" show={this.state.showSuccess}> {this.state.warn} </Toptips>
		        <Toptips type="warn" show={this.state.showWarn}> {this.state.warn} </Toptips>
	            <CellBody style={{ margin: '32px 7px 0 7px'}}>
                    <Button type="warn" onClick={()=>this.register()}>注册</Button>
	            </CellBody>
            </div>
		);
	}
}
export default connectUser(UserSignUp)
